<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h24 p-b24">
      <view class="card flex">
        <text class="flex-1 text-700-130">公司名称：</text>
        <input v-model="formState.title" class="flex-1 text-700-130 text-r" type="text" placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">职位：</text>
        <input v-model="formState.position" class="flex-1 text-700-130 text-r" type="text" placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex" @click="openDatePicker('start', formState.enrol_time)">
        <text class="flex-1 text-700-130">入职时间：</text>
        <text v-if="formState.enrol_time" class="text-700-130">{{ formState.enrol_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex" @click="openDatePicker('end', formState.end_time)">
        <text class="flex-1 text-700-130">离职时间：</text>
        <text v-if="formState.end_time" class="text-700-130">{{ formState.end_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>

      <view class="label text-700-130">工作内容</view>
      <textarea v-model="formState.content" class="textarea" placeholder="请填写" :maxlength="9999"></textarea>
    </view>

    <view class="flex-c">
      <RcButton :width="340" :top="100" text="确认" @click="onSubmit" />
    </view>

    <up-datetime-picker v-model="selectedDate" :show="showDatePicker" :minDate="new Date('1990-01-01').getTime()"
      :maxDate="Date.now()" mode="date" @confirm="onDatePickerConfirm" @cancel="closeDatePicker" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import RcButton from '@/components/button.vue'
import type { TResumeJob } from '@/types/api.d'
import { useJobDatePicker } from './useJobDatePicker'
import { timeFormat } from '@/utils/utils'

let jobId: number | null = null

const isUpdate = ref(false)

const formState = reactive({
  title: '',
  position: '',
  content: '',
  enrol_time: '',
  end_time: '',
})

const {
  selected: selectedDate,
  isStartPicker,
  show: showDatePicker,
  open: openDatePicker,
  close: closeDatePicker,
} = useJobDatePicker()

const onDatePickerConfirm = () => {
  if (isStartPicker.value) {
    formState.enrol_time = timeFormat(selectedDate.value)
  } else {
    formState.end_time = timeFormat(selectedDate.value)
  }

  closeDatePicker()
}

// 重新加载上一个页面的数据
const reloadPrePage = () => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 2]
  page.$vm.$.exposed.getMyResume()
}

const onSubmit = () => {
  if (!validate()) return

  const url = isUpdate.value ? '/job/edit' : '/job/add'
  const data: Record<string, any> = { ...formState }
  if (isUpdate.value) {
    data.id = jobId
  }

  uni.$u.post(url, data).then((res) => {
    uni.showToast({ title: res.msg, icon: 'none' })

    if (res.code === 1) {
      reloadPrePage()
      uni.navigateBack()
    }
  })
}

const validate = () => {
  if (formState.title === '') {
    uni.showToast({
      title: '请填写公司名称',
      icon: 'none',
    })
    return false
  }
  if (formState.position === '') {
    uni.showToast({
      title: '请填写职位',
      icon: 'none',
    })
    return false
  }
  if (formState.enrol_time === '') {
    uni.showToast({
      title: '请选择入职年份',
      icon: 'none',
    })
    return false
  }
  if (formState.end_time === '') {
    uni.showToast({
      title: '请选择离职时间',
      icon: 'none',
    })
    return false
  }
  if (formState.content === '') {
    uni.showToast({
      title: '请填写工作内容',
      icon: 'none',
    })
    return false
  }

  return true
}

onLoad((e) => {
  isUpdate.value = e?.type === 'update'

  if (isUpdate.value) {
    uni.setNavigationBarTitle({ title: '编辑工作经历' })
    uni.getStorage({
      key: 'RESUME_JOB_RECORD',
      success: (res) => {
        const record = JSON.parse(res.data) as TResumeJob
        jobId = record.id
        formState.title = record.title
        formState.position = record.position
        formState.content = record.content
        formState.enrol_time = record.enrol_time
        formState.end_time = record.end_time
      },
    })
  } else {
    uni.setNavigationBarTitle({ title: '添加工作经历' })
  }
})
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.main-view {
  border-radius: 10rpx;
  background-color: $bg-color-1;

  .label {
    line-height: 102rpx;
  }

  .textarea {
    width: 100%;
    height: 326rpx;
    padding: 16rpx;
    border-radius: 6rpx;
    border: 1rpx solid $border-color-4;
  }
}

.card {
  height: 102rpx;
  border-bottom: 1rpx solid $border-color-4;
}
</style>
